<template>
    <div class="layout">
        <Layout class="layout-box">
            <Header>
                <h2 class="item-inline logo">mecms后台管理系统</h2>
                <div class="item-inline">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎&nbsp;<span>{{name}}</span>&nbsp;登录
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="loginout" @click="loginout">退出</span>
                </div>
            </Header>
            <Layout>
                <Sider hide-trigger class="slider-box">
                    <MenuTree :menuTree="menuTree" :menuKeys="menuKeys" :selectItem="selectItem" @selectEvent="selectMenuItem"></MenuTree>
                </Sider>
                <Layout class="right-box">
                    <Breadcrumb class="bread-box" separator=">">
                        <BreadcrumbItem v-for="(item, index) in menuNav" :key="index">{{item.name}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Content class="content-box">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import menuToPage from '@/js/menuToPage.js'
    import MenuTree from '@/components/menuTree/menuTree.vue'

    export default {
        components: {
            MenuTree
        },
        data () {
            var cookie = this.$util.cookie();
            var name = cookie.get('name');
            var menuNav = [{
                    name: '主页'
                }];

            // 防刷新menuNav
            var cookieMenuNav = cookie.get('menuNav');
            if(cookieMenuNav){
                menuNav = cookieMenuNav;
            }

            return {
                selectItem: 0,
                menuKeys: {
                    id: 'id',
                    name: 'name',
                    children: 'children'
                },
                menuTree: null,
                name: name,
                menuObj: null,
                menuNav: menuNav,
            }
        },
        created: function () {
            // 获取左侧菜单列表
            this.getMenu();
        },
        methods: {
            loginout($event){
                var that = this;
                // 退出登录
                that.$util.ajax({
                    that: that,
                    url: '/login/loginout/',
                    method: 'post',
                    success: function(data){
                        // 清空缓存
                        var cookie = that.$util.cookie();
                        cookie.clear();

                        that.$router.push({
                                            name: 'login',
                                            params: {}
                                        })
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            selectMenuItem(id){
                var cookie = this.$util.cookie();
                var nowMenu = this.menuObj[id];
                var path = nowMenu.url;
                // 设置menuNav
                var parentId = nowMenu['parent_id'];
                var menuNav = [];

                this.selectItem = id;
                menuNav.unshift(nowMenu);
                while(parentId){
                    var parentMenu = this.menuObj[parentId];
                    menuNav.unshift(parentMenu);
                    parentId = parentMenu['parent_id']
                }
                menuNav.unshift(this.menuNav[0])
                cookie.set('menuNav',menuNav);
                this.menuNav = menuNav;

                //跳转路由
                this.$router.push({
                                    path: menuToPage[path].pagePath,
                                    params: {}
                                })
            },
            // 获取左侧菜单列表信息
            getMenu(){
                var cookie = this.$util.cookie();
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/admin/getmenu/',
                    method: 'post',
                    success: function(data){
                        var menuArr = [];
                        that.menuObj = that.menuToObj(data.data);
                        cookie.set('menuList',that.menuObj);

                        var len = data.data.length;
                        for(var i=0; i<len; i++){
                            var item = data.data[i];
                            if(item.type !== 2){
                                menuArr.push(item);
                            }
                        }

                        that.menuTree = that.$util.arrToTree(menuArr, {id:'id', parentId: 'parent_id'});
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            },
            // 处理
            menuToObj(data){
                var menuObj = {};
                var len = data.length;

                for(var i=0; i<len; i++){
                    var menuItem = data[i];
                    menuObj[menuItem.id] = data[i];
                }
                return menuObj;
            }
        }
    }
</script>
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
}
.layout .item-inline {
    line-height: 64px;
    display: inline-block;
    color: #fff;
}
.layout .logo {
    font-size: 20px;
}
.layout .loginout {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
    line-height: 1;
}
.layout .loginout:hover {
    color: #ed4014;
}
.spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
}
.layout .slider-box {
    background: #fff;
    overflow-y: auto
}
.layout .layout-box {
    height: 100%
}
.layout .right-box {
    padding: 0 15px 20px;
}
.layout .bread-box {
    margin: 15px 0;
}
.layout .menu-box {
    position: static!important;
    height: 100%;
    overflow-y: auto;
}
</style>